<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统管理</title>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
</head>
<body>
<style>
    .el-input__inner{
        width: 150px;
    }
</style>
<div id="app">
    <el-tabs type="border-card">
        <el-tab-pane label="账号管理">
            <div>
                <span style="font-size: 13px">学校名称:</span>
                <template>
                    <el-select v-model="value" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <span style="font-size: 13px">用户姓名:</span>
                <input type="text" name="name"
                       style="-webkit-appearance: none;background: #FFF;border-radius: 4px;border: 1px solid #DCDFE6;
            box-sizing: border-box;color: #606266;display: inline-block;font-size: inherit;height: 28px;line-height: 35px;
            outline: 0;padding: 0 15px;width: 150px"
                >

                <span style="font-size: 13px">账号状态:</span>
                <template>
                    <el-select v-model="value" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>

                <el-button type="primary" size="mini">查询</el-button>
                <el-button size="mini">重置</el-button>
                <span style="margin-left: 100px">
        <el-button type="primary" size="mini" @click="dialog = true">添加账号</el-button>
    </span>
            </div>

            <el-table
                :data="tableDataManage"
                style="width: 100%">
                <el-table-column
                        label="序号"
                        prop="schoolName">
                </el-table-column>
            <el-table-column
                    label="用户姓名"
                    prop="Faculties">
            </el-table-column>
            <el-table-column
                    label="手机号码"
                    prop="JobNumber">
            </el-table-column>
            <el-table-column
                    label="角色类型"
                    prop="name">
            </el-table-column>
            <el-table-column
                    label="所在地区"
                    prop="sex">
            </el-table-column>
            <el-table-column
                    label="学校名称"
                    prop="PhoneNumber">
            </el-table-column>
            <el-table-column
                    label="账号状态"
                    prop="status">
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="deleteHandleManage(scope.row.brandId)">删除</el-button>
                    <el-button
                            size="mini"
                            @click="deleteHandleManage(scope.row.brandId)">编辑</el-button>
                    <el-button
                            size="mini"
                            @click="deleteHandleManage(scope.row.brandId)">修改密码</el-button>
                    <el-button
                            size="mini"
                            @click="deleteHandleManage(scope.row.brandId)">修改手机</el-button>
                </template>
            </el-table-column>
        </el-table>
            <el-drawer
                    title="添加账号"
                    :before-close="handleClose"
                    :visible.sync="dialog"
                    direction="rtl"
                    custom-class="demo-drawer"
                    ref="drawer"
            >
                <div class="demo-drawer__content">
                    <el-form :model="form">
                        <el-form-item label="用户姓名" :label-width="formLabelWidth">
                            <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码" :label-width="formLabelWidth">
                            <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="活动区域" :label-width="formLabelWidth">
                            <el-select v-model="form.region" placeholder="请选择活动区域">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="学校名称" :label-width="formLabelWidth">
                            <el-select v-model="form.region" placeholder="请选择活动区域">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="账号状态" :label-width="formLabelWidth">
                            <el-radio-group v-model="form.state">
                                <el-radio label="启动"></el-radio>
                                <el-radio label="禁用"></el-radio>
                            </el-radio-group>
                        </el-form-item>

                    </el-form>
                    <div class="demo-drawer__footer">
                        <el-button @click="cancelForm">取 消</el-button>
                        <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                    </div>
                </div>
            </el-drawer>
        </el-tab-pane>








        <el-tab-pane label="角色权限">
            <div>
                <span style="font-size: 13px"> 学校名称:</span>
                <template>
                    <el-select v-model="value" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <span style="font-size: 13px"> 角色类型:</span>
                <template>
                    <el-select v-model="value" filterable placeholder="请选择" size="mini">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <el-button type="primary" size="mini">查询</el-button>
                <el-button size="mini">重置</el-button>
                <span style="margin-left: 100px">
        <el-button type="primary" size="mini"  @click="addRole = true">添加角色</el-button>
    </span>
            </div>

            <el-table
                    :data="tableDataCertification"
                    style="width: 100%">
                <el-table-column
                        label="序号"
                        prop="schoolName">
                </el-table-column>
                <el-table-column
                        label="角色名称"
                        prop="Faculties">
                </el-table-column>
                <el-table-column
                        label="角色类型"
                        prop="JobNumber">
                </el-table-column>
                <el-table-column
                        label="学校名称"
                        prop="name">
                </el-table-column>
                <el-table-column
                        label="院系机构"
                        prop="sex">
                </el-table-column>
                <el-table-column
                        label="备注"
                        prop="PhoneNumber">
                </el-table-column>
                <el-table-column
                        label="角色状态"
                        prop="status">
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                >编辑</el-button>
                        <el-button
                                size="mini"
                                  >角色权限</el-button>
                        <el-button
                                size="mini"
                                @click="deleteHandleCertification(scope.row.brandId)" >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-drawer
                    title="添加角色"
                    :before-close="handleClose"
                    :visible.sync="addRole"
                    direction="rtl"
                    custom-class="demo-drawer"
                    ref="drawer"
            >
                <div class="demo-drawer__content">
                    <el-form :model="form">
                        <el-form-item label="角色名称" :label-width="formLabelWidth">
                            <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="角色类型" :label-width="formLabelWidth">
                            <el-select v-model="form.region" placeholder="请选择活动区域">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="学校名称" :label-width="formLabelWidth">
                            <el-select v-model="form.region" placeholder="请选择学校名称">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="活动区域" :label-width="formLabelWidth">
                            <el-select v-model="form.region" placeholder="请选择活动区域">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="院系机构" :label-width="formLabelWidth">
                            <el-select v-model="form.region" placeholder="请选择院系机构">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="账号状态" :label-width="formLabelWidth">
                            <el-radio-group v-model="form.state">
                                <el-radio label="启动"></el-radio>
                                <el-radio label="禁用"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="备注" :label-width="formLabelWidth">
                                <el-input type="textarea" v-model="form.desc"></el-input>
                        </el-form-item>



                    </el-form>
                    <div class="demo-drawer__footer">
                        <el-button @click="cancelForm">取 消</el-button>
                        <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
                    </div>
                </div>
            </el-drawer>
         </el-tab-pane>
    </el-tabs>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script>
   new Vue({
       el: "#app",
       data() {
           return {
               tableDataCertification: [{
                   brandId:1,
                   schoolName: 'schoolName',
                   Faculties: 'faculties',
                   JobNumber: 'jobNumber',
                   name: 'name',
                   sex: 'sex',
                   PhoneNumber: 'phoneNumber',
                   status: 'status',
                   date: 'date',
               },{
                   brandId:2,
                   schoolName: 'schoolName',
                   Faculties: 'faculties',
                   JobNumber: 'jobNumber',
                   name: 'name',
                   sex: 'sex',
                   PhoneNumber: 'phoneNumber',
                   status: 'status',
                   date: 'date',
               },{
                   brandId:3,
                   schoolName: 'schoolName',
                   Faculties: 'faculties',
                   JobNumber: 'jobNumber',
                   name: 'name',
                   sex: 'sex',
                   PhoneNumber: 'phoneNumber',
                   status: 'status',
                   date: 'date',
               }],
               tableDataManage: [{
                   brandId:1,
                   schoolName: 'schoolName',
                   Faculties: 'faculties',
                   JobNumber: 'jobNumber',
                   name: 'name',
                   sex: 'sex',
                   PhoneNumber: 'phoneNumber',
                   status: 'status',
                   date: 'date',
               },{
                   brandId:2,
                   schoolName: 'schoolName',
                   Faculties: 'faculties',
                   JobNumber: 'jobNumber',
                   name: 'name',
                   sex: 'sex',
                   PhoneNumber: 'phoneNumber',
                   status: 'status',
                   date: 'date',
               },{
                   brandId:3,
                   schoolName: 'schoolName',
                   Faculties: 'faculties',
                   JobNumber: 'jobNumber',
                   name: 'name',
                   sex: 'sex',
                   PhoneNumber: 'phoneNumber',
                   status: 'status',
                   date: 'date',
               }],
               dataListLoadingManage: false,
               dataListSelectionsManage: [],
               dataListLoadingCertification: false,
               dataListSelectionsCertification: [],
               options: [
                   { value: '选项1', label: '黄金糕' },
                   { value: '选项2', label: '双皮奶' },
                   { value: '选项3', label: '蚵仔煎' },
                   { value: '选项4', label: '龙须面' },
                   { value: '选项5', label: '北京烤鸭' }
               ],
               value: '',
               form: {
                   name: '',
                   region: '',
                   date1: '',
                   date2: '',
                   delivery: false,
                   type: [],
                   resource: '',
                   desc: ''
               },
               formLabelWidth: '80px',
               timer: null,
               dialog: false,
               addRole: false
           };
       },
       methods: {
           // 多选
           selectionChangeHandleManage(val) {
               this.dataListSelectionsManage = val;
           },
           // 删除
           deleteHandleManage(id) {
               console.log(id)
               var ids = id
                   ? [id]
                   : this.dataListSelectionsManage.map(item => {
                       return item.brandId;
                   });
               this.$confirm(
                   `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
                   "提示",
                   {
                       confirmButtonText: "确定",
                       cancelButtonText: "取消",
                       type: "warning"
                   }
               ).then(() => {
                   console.log(ids)
                   //发送请求
               });
           },
           // 多选
           selectionChangeHandleCertification(val) {
               this.dataListSelectionsCertification = val;
           },
           // 删除
           deleteHandleCertification(id) {
               console.log(id)
               var ids = id
                   ? [id]
                   : this.dataListSelectionsCertification.map(item => {
                       return item.brandId;
                   });
               this.$confirm(
                   `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
                   "提示",
                   {
                       confirmButtonText: "确定",
                       cancelButtonText: "取消",
                       type: "warning"
                   }
               ).then(() => {
                   console.log(ids)
                   //发送请求
               });
           },
           handleClose(done) {
               if (this.loading) {
                   return;
               }
               this.$confirm('确定要提交表单吗？')
                   .then(_ => {
                       this.loading = true;
                       this.timer = setTimeout(() => {
                           done();
                           // 动画关闭需要一定的时间
                           setTimeout(() => {
                               this.loading = false;
                           }, 400);
                       }, 2000);
                   })
                   .catch(_ => {});
           },
           cancelForm() {
               this.loading = false;
               this.dialog = false;
               clearTimeout(this.timer);
           }
       },
       created(){
           console.log("开始")
       }
   })
</script>
</html>